<template>
  <div class="home">

    <section>
      <div class="homeNav">  
        <div class="city-select">
          <span class="city-name">广州</span>
          <i class="enter-arrow"></i>
        </div>
        <div class="link">
          <mt-navbar v-model="selected">
            <mt-tab-item id="1" :class="{seltOnce : isActive}">
              <router-link to="/home/playing">正在热映</router-link>
            </mt-tab-item>
            <mt-tab-item id="2" :class="{seltOnce : !isActive}">
              <router-link to="/home/comming">即将上映</router-link>
            </mt-tab-item>
          </mt-navbar> 
        </div>
        <div class="search">
          <img src="../assets/fdj.png" alt="">
        </div>
      </div>
    </section>

    <!-- home下的子路由 children -->
    <router-view/>

  </div>
</template>


<style lang="scss">
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #e54847 !important;
}
.mint-navbar .mint-tab-item {
  padding: 13px 0 !important;
}
.link{
  a{
    color: #666;
    font-weight: 700;
    font-size: 15px;
  }
}
section{
    width: 100%;
    position: fixed;
    top: 52px;
    left: 0;
    z-index: 999;
  .homeNav{  
    display: flex;
    height: 45px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #fff;
    .city-select{
      flex: 1;
      .city-name{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
        max-width: 19.2vw;
      }
      .enter-arrow{
        display: inline-block;
        margin-left: 5px;
        margin-bottom: 2px;
        width: 0;
        height: 0;
        border-top: 5px solid #b0b0b0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
      }
    }
    .link{
      flex: 2;

      .seltOnce{
        border-bottom: 2px solid #e54847;
        margin-bottom: -3px;  
        a{
          color: #e54847;
        }
      }
    }
    .search{
      width: 15vw;
      img{
        width: 20px;
        height: 20px;
        margin-top: 5px;
      }
    }
  }
}
</style>


<script>

import '@/scss/home.scss'

export default {
 
  data(){
    return {
      selected:'',
    }
  },
  methods: {

  },
  computed: {
    isActive(){
      if (this.selected == '2') {
        return false;
      }else{
        return true;
      }
    }
  }

}
</script>


